<template>
  <div id="qiItemFixedDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-button type="text" icon="vxe-icon-refresh" class="button-blue" content="刷新" :loading="sLoading" @click="findQiIndexItemFixedList()"></vxe-button>
        <vxe-button type="text" icon="vxe-icon-save" class="button-blue" content="保存" @click="saveFixedList"></vxe-button>
        <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteBatchFixed"></vxe-button>
      </template>
    </vxe-toolbar>
    <div class="qiIndexFixedTable">
      <vxe-table ref="qiIndexFixedTableRef" :loading="sLoading" :data="qiIndexItemFixedList" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" resizable show-overflow keep-source>
        <vxe-column type="checkbox" width="30"></vxe-column>
        <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
        <vxe-column field="majorCode" title="专业编码" min-width="100">
        </vxe-column>
        <vxe-column field="majorName" title="专业名称" width="300">
        </vxe-column>
        <vxe-column field="fixedValue" title="固定值" width="300" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.fixedValue" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="seq" title="顺序" min-width="40" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.seq" type="text"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { IsEmpty, formatDateTime } from '@/utils/common';
import { AppStore } from '@/stores/store';
let store = AppStore();

defineExpose({
  initPage
});

let qiIndexItem: any = null;
let qiIndex: any = null;
let sLoading = ref(false); //刷新+表格加载状态
let qiIndexItemFixedList: any = reactive([]);
// 方法定义区 =============
function initPage(row: any, qiIndexRow: any) {
  qiIndexItem = row;
  qiIndex = qiIndexRow;
  console.log(qiIndexItem);
  console.log(qiIndex);
  findQiIndexItemFixedList();
}

function findQiIndexItemFixedList() {
  sLoading.value = true;
  qiIndexItemFixedList.length = 0; //放入数据前清空数据
  const url = '/api/qi/qiIndexItemFixed/findQiIndexItemFixedList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        indexId: qiIndex.id,
        itemId: qiIndexItem.id
      }
    })
    .then((res: any) => {
      if (!IsEmpty(res.data)) {
        qiIndexItemFixedList.push(...res.data);
      }
      sLoading.value = false;
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
      sLoading.value = false;
    });
}

async function saveFixedList() {
  let $Xtable = proxy.$refs.qiIndexFixedTableRef;
  if ($Xtable) {
    // 表格实例表用该方法拿到有id的为修改
    const updateRecords = await $Xtable.getUpdateRecords().filter((p: any) => {
      return p.id && p.id !== '';
    });
    // 拿到数组中没有id的数据为新增
    const InsertRecords = qiIndexItemFixedList.filter((e: any) => {
      return !e.id || e.id === '';
    });

    const sveOrupdateSamples = [] as any[];
    updateRecords.forEach((e: any) => {
      const iISample: any = {
        id: e.id,
        indexId: e.indexId,
        indexCode: e.indexCode,
        itemId: e.itemId,
        itemCode: e.itemCode,
        majorId: e.majorId,
        majorCode: e.majorCode,
        fixedValue: e.fixedValue,
        seq: e.seq
      };

      sveOrupdateSamples.push(iISample);
    });

    InsertRecords.forEach((e: any) => {
      const iISample: any = {
        id: e.id,
        indexId: e.indexId,
        indexCode: e.indexCode,
        itemId: e.itemId,
        itemCode: e.itemCode,
        majorId: e.majorId,
        majorCode: e.majorCode,
        fixedValue: e.fixedValue,
        seq: e.seq
      };
      sveOrupdateSamples.push(iISample);
    });

    if (sveOrupdateSamples.length > 0) {
      const url = '/api/qi/qiIndexItemFixed/saveOrUpdateIndexItemFixed';
      const obj: any = {};
      obj.qiIndexItemFixedList = sveOrupdateSamples;
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('更新成功', VxeNotifyType.success);
          setTimeout(() => {
            findQiIndexItemFixedList();
          }, 50);
        })
        .catch((err: any) => {
          VxeMessage('更新失败', VxeNotifyType.success);
        });
    } else {
      VxeMessage('无添加或修改数据', VxeNotifyType.error);
    }
  } else {
    return;
  }
}

function deleteBatchFixed() {
  const sltTatItems = (proxy.$refs.qiIndexFixedTableRef as any).getCheckboxRecords();
  if (!(sltTatItems.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { qiIndexItemFixedList: sltTatItems };
        const url = '/api/qi/qiIndexItemFixed/batchDeleteFixedList';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            if (res.status.code === 1) {
              findQiIndexItemFixedList(); // 获取检验仪器表格数据
              VxeMessage('删除成功', VxeNotifyType.success);
            } else {
              VxeMessage(res.status.msg, VxeNotifyType.error);
            }
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
</script>

<style lang="scss" scoped>
#qiItemFixedDiv {
  height: 100%;
  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }
  .qiIndexFixedTable {
    height: calc(100% - 40px);
  }
}
</style>
